import React from "react";
import './index.css';
import StartExam from "../../Common/svg/StartExam";
import { Button } from 'antd';

// 考试交卷倒计时
export default class TestCountdown extends React.Component{
    constructor(props){
        super();
        this.state={
            text:props.text,
            subtext:props.subtext,
            question_num:props.question_num,
            countdown:props.countdown,
            finishExam:props.finishExam,
            parseExam:props.parseExam
        }
    }

    UNSAFE_componentWillReceiveProps(props){
        this.setState({
            text:props.text,
            subtext:props.subtext,
            question_num:props.question_num,
            countdown:props.countdown,
            finishExam:props.finishExam,
            parseExam:props.parseExam
        })
    }
    
    // 资料书组件
    render(){
        let time=this.state.countdown>60?`${parseInt(this.state.countdown/60)}`+":"+`${parseInt(this.state.countdown%60)}`:this.state.countdown;
        // console.log(time)
        return(
            <div className="TestCountdown_Body" id="TestCountDown_Body">
                <div className="TestCountdown_Top">
                    <div className="TestCountdown_Top_Right">
                        <div className="TestCountdown_Top_Text">
                            <div className="TestCountdown_Top_Title">{this.state.text}</div>
                            <div className="TestCountdown_Top_subTitle">{this.state.subtext}</div>
                        </div>
                    </div>
                    <div className="TestCountdown_Top_Img">
                        <StartExam />
                    </div>
                </div>
                <div className="TestCountdown_Middle">
                    <div>
                        <div className="TestCountdown_Middle_left">
                            <div className="TestCountdown_Middle_Title">剩余题目</div>
                            <div className="TestCountdown_Middle_subTitle">{this.state.question_num}</div>
                        </div>
                        <div className="TestCountdown_Middle_right">
                            <div className="TestCountdown_Middle_Title">剩余时间</div>
                            <div className="TestCountdown_Middle_subTitle">{time}</div>
                        </div>
                    </div>
                </div>
                <div className="TestCountdown_Bottom" >
                    <div>
                    
                    
                    <div className="TestCountdown_Bottom_left">
                        <Button  style={{width:"102px"}} type="primary" shape="round"  size="large"  onClick={e=>this.state.finishExam()}>
                    交卷
                    </Button></div>
                        <div className="TestCountdown_Bottom_right" >
                            <Button style={{width:"102px"}} type="default" shape="round"  size="large" onClick={e=>this.state.parseExam()}>
                    中断考试
                    </Button></div>
                    </div>
                </div>
            </div>
        )
    }
}